<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>LineMaterial - Three.js Docs</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="../scripts/highlight.min.js"></script>
	<link type="text/css" rel="stylesheet" href="../styles/highlight-three.css">
	<link type="text/css" rel="stylesheet" href="../styles/page.css">
</head>
<body>
		<p class="inheritance" translate="no"><a href="EventDispatcher.html">EventDispatcher</a> → <a href="Material.html">Material</a> → <a href="ShaderMaterial.html">ShaderMaterial</a> → </p>
	<h1 translate="no">LineMaterial</h1>
		<section>
			<header>
				<div class="class-description"><p>A material for drawing wireframe-style geometries.</p>
<p>Unlike <a href="LineBasicMaterial.html">LineBasicMaterial</a>, it supports arbitrary line widths and allows using world units
instead of screen space units. This material is used with <a href="LineSegments2.html">LineSegments2</a> and <a href="Line2.html">Line2</a>.</p>
<p>This module can only be used with <a href="WebGLRenderer.html">WebGLRenderer</a>. When using <a href="WebGPURenderer.html">WebGPURenderer</a>,
use <a href="Line2NodeMaterial.html">Line2NodeMaterial</a>.</p></div>
			</header>
			<article>
				<h2 class="subsection-title">Import</h2>
				<p><span translate="no">LineMaterial</span> is an addon, and must be imported explicitly, see <a href="https://threejs.org/manual/#en/installation" target="_blank" rel="noopener">Installation#Addons</a>.</p>
				<pre><code class="language-js">import { LineMaterial } from 'three/addons/lines/LineMaterial.js';</code></pre>
				<div class="container-overview">
					<h2>Constructor</h2>
					<h3 class="name name-method" id="LineMaterial" translate="no">new <a href="#LineMaterial">LineMaterial</a><span class="signature">( parameters : <span class="param-type">Object</span> )</span> </h3>
					<div class="method">
						<div class="description">
							<p>Constructs a new line segments geometry.</p>
						</div>
						<table class="params">
							<tbody>
								<tr>
									<td class="name">
										<strong>parameters</strong>
									</td>
									<td class="description last">
										<p>An object with one or more properties
defining the material's appearance. Any property of the material
(including any property from inherited materials) can be passed
in here. Color values can be passed any type of value accepted
by <a href="Color.html#set">Color#set</a>.</p>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<h2 class="subsection-title">Properties</h2>
				<div class="member">
					<h3 class="name" id="alphaToCoverage" translate="no">.<a href="#alphaToCoverage">alphaToCoverage</a><span class="type-signature"> : boolean</span> </h3>
					<div class="description">
						<p>Whether to use alphaToCoverage or not. When enabled, this can improve the
anti-aliasing of line edges when using MSAA.</p>
					</div>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="ShaderMaterial.html#alphaToCoverage">ShaderMaterial#alphaToCoverage</a></dt>
						</dl>
				</div>
				<div class="member">
					<h3 class="name" id="color" translate="no">.<a href="#color">color</a><span class="type-signature"> : <a href="Color.html">Color</a></span> </h3>
					<div class="description">
						<p>The material's color.</p>
						<p>Default is <code>(1,1,1)</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="dashOffset" translate="no">.<a href="#dashOffset">dashOffset</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>Where in the dash cycle the dash starts.</p>
						<p>Default is <code>0</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="dashScale" translate="no">.<a href="#dashScale">dashScale</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The scale of the dashes and gaps.</p>
						<p>Default is <code>1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="dashSize" translate="no">.<a href="#dashSize">dashSize</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The size of the dash.</p>
						<p>Default is <code>1</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="dashed" translate="no">.<a href="#dashed">dashed</a><span class="type-signature"> : boolean</span> </h3>
					<div class="description">
						<p>Whether the line is dashed, or solid.</p>
						<p>Default is <code>false</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="gapSize" translate="no">.<a href="#gapSize">gapSize</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The size of the gap.</p>
						<p>Default is <code>0</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="isLineMaterial" translate="no">.<a href="#isLineMaterial">isLineMaterial</a><span class="type-signature"> : boolean</span> <span class="type-signature">(readonly) </span></h3>
					<div class="description">
						<p>This flag can be used for type testing.</p>
						<p>Default is <code>true</code>.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="linewidth" translate="no">.<a href="#linewidth">linewidth</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>Controls line thickness in CSS pixel units when <code>worldUnits</code> is <code>false</code> (default),
or in world units when <code>worldUnits</code> is <code>true</code>.</p>
						<p>Default is <code>1</code>.</p>
					</div>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="ShaderMaterial.html#linewidth">ShaderMaterial#linewidth</a></dt>
						</dl>
				</div>
				<div class="member">
					<h3 class="name" id="opacity" translate="no">.<a href="#opacity">opacity</a><span class="type-signature"> : number</span> </h3>
					<div class="description">
						<p>The opacity.</p>
						<p>Default is <code>1</code>.</p>
					</div>
						<dl class="details">
							<dt class="tag-overrides"><strong>Overrides:</strong> <a href="ShaderMaterial.html#opacity">ShaderMaterial#opacity</a></dt>
						</dl>
				</div>
				<div class="member">
					<h3 class="name" id="resolution" translate="no">.<a href="#resolution">resolution</a><span class="type-signature"> : <a href="Vector2.html">Vector2</a></span> </h3>
					<div class="description">
						<p>The size of the viewport, in screen pixels. This must be kept updated to make
screen-space rendering accurate.The <code>LineSegments2.onBeforeRender</code> callback
performs the update for visible objects.</p>
					</div>
				</div>
				<div class="member">
					<h3 class="name" id="worldUnits" translate="no">.<a href="#worldUnits">worldUnits</a><span class="type-signature"> : boolean</span> </h3>
					<div class="description">
						<p>Whether the material's sizes (width, dash gaps) are in world units.</p>
						<p>Default is <code>false</code>.</p>
					</div>
				</div>
				<h2 class="subsection-title">Source</h2>
				<p>
					<a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/lines/LineMaterial.js" translate="no" target="_blank" rel="noopener">examples/jsm/lines/LineMaterial.js</a>
				</p>
			</article>
		</section>
<script src="../scripts/linenumber.js"></script>
<script src="../scripts/page.js"></script>
</body>
</html>